<template>
  <div class="custom-wrapper" :style="'position:relative;'">
    <el-table
      ref="table"
      v-loading="loading"
      :header-cell-style="{}"
      :row-key="getrowkey"
      width="100%"
      style="width: 100%"
      :border="border"
      :data="tableData"
      :show-pager="false"
      :height="'height'"
      :stripe="true"
      :single-choice="singleChoice"
      :show-summary="tableStyle.Is_Summary"
      :summary-method="getSummaries"
      :show-header="true"
      :child-table="true"
      :tree-props="{ children: 'Children', hasChildren: 'hasChildren' }"
      :highlight-current-row="highlightCurrentRow"
      @sort-change="changeTableSort"
      @selection-change="changeFun"
      @select-all="onSelectAll"
      @row-click="rowClick"
      @cell-click="cellClick"
    >
      <el-table-column
        v-if="tableStyle.Is_Select"
        type="selection"
        width="45"
        fixed="left"
        :reserve-selection="true"
      />
      <el-table-column
        v-if="tableStyle.Is_Row_Number"
        label="排序号"
        prop="RowNumberIndex"
        align="center"
        width="65"
        fixed="left"
      />
      <template v-for="(item, index) in tableConfig">
        <el-table-column
          v-if="item.style && item.style.type === 'switch' && item.Is_Display"
          :key="'switch' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row[item.key]"
              active-color="#298DFF"
              :disabled="item.style.disabled === 'true' || item.style.disabled === true"
              @change="operatefunction(item.style.operate, scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'button' && item.Is_Display"
          :key="'button' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-breadcrumb
              separator="|"
              style="width: fit-content; margin-left: auto; margin-right: auto"
            >
              <template v-for="(btn, btnindex) in item.style.buttondata">
                <el-breadcrumb-item
                  v-if="
                    (!btn.showCondition || isShowOperateBtn(btn, scope)) &&
                    !hidebtnlist.includes(btn.operate)
                  "
                  :key="'btn' + btnindex"
                  @click.native="operatefunction(btn.operate, scope, btn)"
                >
                  <span style="color: #328fff; cursor: pointer">
                    <template>{{ btn.label }}</template>
                  </span>
                </el-breadcrumb-item>
              </template>
            </el-breadcrumb>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'tag' && item.Is_Display"
          :key="'tag' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <el-tag
              :type="tagColor(item.style.tagdata, scope.row[item.key])"
              :hit="true"
              :effect="item.style.effect || null"
              >{{
                tagLabel(item.style.tagdata, rounding(item, scope.row[item.slot]))
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'colorNo' && item.Is_Display"
          :key="'tag' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <span :style="{ background: scope.row[item.key] }" class="colorNo">{{
              rounding(item, scope.row[item.slot])
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'date' && item.Is_Display"
          :key="'date' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">{{
            dateformater(rounding(item, scope.row[item.slot]), item.style)
          }}</template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'formatData' && item.Is_Display"
          :key="'date' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">{{
            formatData(rounding(item, scope.row[item.slot]), item.style)
          }}</template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'image' && item.Is_Display"
          :key="'date' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <el-tooltip placement="top" effect="light">
              <div slot="content">
                <el-image
                  :style="'max-height: 300px;max-width: 300px; '"
                  :src="scope.row[item.slot]"
                  fit="contain"
                />
              </div>
              <el-image
                :style="'width: 20px; height: 20px;'"
                :src="scope.row[item.slot]"
                fit="contain"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'money' && item.Is_Display"
          :key="'money' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            {{ rounding(item, scope.row[item.slot]) | toThousandFilter }}
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'special' && item.Is_Display"
          :key="'date' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <div :style="'color:' + item.style.color">
              {{ specialformat(item.style.format, rounding(item, scope.row[item.slot])) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'instead' && item.Is_Display"
          :key="'date' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <span
              :style="'color:' + insteadColor(item.style.tagdata, scope.row[item.key])"
              >{{
                tagLabel(item.style.tagdata, rounding(item, scope.row[item.slot]))
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'list' && item.Is_Display"
          :key="'date' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <el-tag
              v-for="(tmp, index) in scope.row[item.slot].split(',')"
              :key="index + 'list' + tmp"
              :style="
                'color:' +
                (item.style.color ? item.style.color : '#222834ca;') +
                'border-color:' +
                (item.style.bordercolor ? item.style.bordercolor : '#14234E20;')
              "
              class="listtag"
              >{{ tmp }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'file' && item.Is_Display"
          :key="'date' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <a style="color: blue" @click="openurl(scope.row[item.slot])"
              ><u>{{ getfilename(scope.row, item.slot, item.style) }}</u></a
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'progress' && item.Is_Display"
          :key="'date' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="16"
              :status="item.style.color"
              :percentage="scope.row[item.slot]"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'progress2' && item.Is_Display"
          :key="'date' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <el-row
              ><el-col :span="4">{{ scope.row[item.slot] }}</el-col
              ><el-col :span="20"
                ><el-progress
                  style="margin-top: 7px"
                  :text-inside="item.style.textinside"
                  :show-text="false"
                  :stroke-width="item.style.width ? item.style.width : 9"
                  :status="item.style.color"
                  :percentage="
                    (scope.row[item.slot] / scope.row[item.style.full]) * 100
                  " /></el-col
            ></el-row>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.style && item.style.type === 'fontcolor' && item.Is_Display"
          :key="'date' + index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">
            <div :style="'color:' + item.style.color">
              {{ scope.row[item.slot] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.Is_Display"
          :key="index"
          :prop="item.key"
          :align="item.align"
          :label="item.title"
          :min-width="item.width === '' ? '120px' : item.width"
          :fixed="item.fixed"
          show-overflow-tooltip
          :sortable="item.sortable === true ? 'custom' : false"
        >
          <template slot-scope="scope">{{
            rounding(item, scope.row[item.slot])
          }}</template>
        </el-table-column>
      </template>
      <!-- <el-table-column label="" /> -->
      <slot />
    </el-table>
    <div v-if="tableStyle.Is_Select" class="sum">
      {{ "已选" }}{{ selections.length }}{{ "条数据" }}
      <slot name="tipLabel" />
    </div>
    <div v-if="tableStyle.Is_Page" class="page">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="sizslist"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- <el-button @click="exportexcel('sds')">aaaa</el-button> -->
  </div>
</template>

<script>
import fs from "file-saver";
import XLSX from "xlsx";
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {
    // 表格Code
    tablecode: {
      type: String,
      default: "",
    },
    // 分页大小
    sizslist: {
      type: Array,
      default: () => [20, 50, 100, 1000],
    },
    // 分类记录数
    pagesize: {
      type: Number,
      default: 20,
    },
    // 表格高度
    tableheight: {
      type: Number,
      default: 500,
    },
    // 行内边框
    border: {
      type: Boolean,
      default: false,
    },
    // 是否显示斑马纹
    stripe: {
      type: Boolean,
      default: true,
    },
    // 显示合计
    sum: {
      type: Boolean,
      default: false,
    },
    // 自定义参数
    customParam: {
      type: Object,
      default: () => {},
    },
    // 表头搜索
    showFilter: {
      type: Boolean,
      default: true,
    },
    // 是否将字段名转换为小写
    caseConversion: {
      type: Boolean,
      default: true,
    },
    // 是否需要单选
    singleChoice: {
      type: Boolean,
      default: false,
    },
    // 默认不加载
    unload: {
      type: Boolean,
      default: false,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    hidebtnlist: {
      type: Array,
      default: () => [],
    },
    propdata:{
        type:Object,
        default:()=>{}
    },
    proptabledata:{
        type:Object,
        default:()=>{}
    }
  },
  data() {
    return {
      loading: false,
      totalCount: 0,
      // 表样式
      tableStyle: {},
      // 表头
      tableConfig: [],
      // 表数据
      tableData: [],
      // 子表数据
      childTableData: [],
      selectnumber: "",
      selections: [],
      formatlist: [],
      message: "",
      // 当前页码
      currentPage: 1,
      PageInfo: {
        Page: 1, // 当前页
        PageSize: this.pagesize, // 每页条数
        SortName: "Create_Date", // 排序字段
        SortOrder: "DESC", // 排序方式
        TotalCount: this.totalCount, // 总记录数
        Search: "",
        ParameterJson: "",
      },
      count: 0,
      tmpparam: {},
      exceldata: [],
      configlist: [],
      json_fields: {},
      filename: "下载内容.xlsx",
    };
  },
  created() {
    this.loading = true;
    var res = this.propdata;
    this.tableStyle = {};
    this.configlist = res.Data.ColumnList;
    this.tableConfig = [];
    if (res.Data.Grid) {
      this.tableStyle = res.Data.Grid;
    }
    if (!this.tableStyle.Height) {
      this.tableStyle.Height = "calc(100vh - 280px)";
    } else {
      this.tableStyle.Height = "calc(" + this.tableStyle.Height + "vh - 280px)";
    }
    // console.log('this.tableStyle.Height', this.tableStyle.Height)
    if (res.Data.Grid.Sort_Column) {
      this.PageInfo.SortName = res.Data.Grid.Sort_Column;
    }
    if (res.Data.Grid.Sort_Type) {
      this.PageInfo.SortOrder = res.Data.Grid.Sort_Type;
    }
    this.tableConfig = res.Data.ColumnList.map((item) => {
      return Object.assign(
        {},
        {
          key: this.caseConversion ? item.Code.toLowerCase() : item.Code,
          title: item.Display_Name,
          Type: item.Type,
          Is_Display: item.Is_Display,
          searchValue: "",
          align: item.Align ? item.Align : "center",
          sortable: item.Is_Sort,
          width:
            item.Is_Display === true
              ? item.Width === null || item.Width === "" || item.Width === 0
                ? ""
                : item.Width
              : "0",
          slot: this.caseConversion ? item.Code.toLowerCase() : item.Code,
          style:
            item.Style === null || item.Style === ""
              ? null
              : { ...JSON.parse(item.Style) },
          fixed:
            item.Is_Frozen === false
              ? false
              : item.Style !== null &&
                item.Style !== "" &&
                JSON.parse(item.Style).type === "button"
              ? "right"
              : "left",
          Digit_Number: item.Digit_Number,
        }
      );
    });

    if (this.tableConfig.Is_Sub_Grid === true) {
      this.tableConfig.unshift({
        type: "expand",
        hideFilter: true,
        slot: "expand",
        width: 50,
        // fixed: 'left'
      });
    }

    if (this.tableConfig.Is_Sub_Grid === true) {
      this.tableConfig.map((item) => {
        item.fixed = "";
      });
      this.childTableConfig = JSON.parse(JSON.stringify(this.tableConfig));
      this.childTableConfig.map((item) => {
        item.fixed = "";
        item.width = item.width - 0.3;
      });
    }
    if (this.tableStyle.Is_Select === true) {
      this.tableConfig.unshift({
        type: "selection",
        width: 60,
        align: "center",
        fixed: "left",
        // hideFilter: true
      });
    }
    if (!this.unload) {
      this.GetTableData();
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
  methods: {
    rowClick(row, column, event) {
      this.$emit("row-click", row, column, event);
    },
    cellClick(row, column, cell, event) {
      this.$emit("cell-click", row, column, cell, event);
    },
    GetTableData() {
      this.loading = true;
      const data = { pageInfo: this.PageInfo };
      const model = Object.assign(this.customParam ? this.customParam : {});
      Object.keys(model).map((item) => {
        data[item] = model[item];
        data.pageInfo[item] = model[item];
      });
      data.pageInfo = this.PageInfo;
      this.getrequest(data);
    },
    getrequest(data) {
      if (this.tableStyle.Data_Url) {
        var res=this.proptabledata
         this.tmpparam = JSON.parse(JSON.stringify(data))
          this.loading = false
          this.tableData = []
          if (res.IsSucceed === true) {
            this.$emit('message', res.Message)
            this.$emit('getalldata', res.Data.Data)
            res.Data.Data.map((item) => {
              this.tableData.push(
                this.caseConversion ? this.upperJSONKey(item) : item
              )
            })
            if (this.tableStyle.Is_Row_Number) {
              this.tableData.map((item, index) => {
                item.RowNumberIndex =
                  (res.Data.Page - 1) * res.Data.PageSize + index + 1
              })
            }
            this.count = 0
            // this.PageInfo = res.Data
            this.totalCount = res.Data.TotalCount
            this.$nextTick(() => {
              this.$refs.table.doLayout()
            })
            this.$emit('getTbData', res.Data)
          }
      } else if (this.count > 10) {
        this.count = 0;
        this.loading = false;
        return;
      } else {
        setTimeout(() => {
          this.getrequest(data);
        }, 500);
      }
    },
    upperJSONKey(jsonObj) {
      for (var key in jsonObj) {
        if (key.toLowerCase() !== key) {
          jsonObj[key.toLowerCase()] = jsonObj[key];
          delete jsonObj[key];
        }
      }
      return jsonObj;
    },
    changeFun(val) {
      if (this.singleChoice) {
        // 单选

        if (val.length > 1) {
          val.filter((item, index) => {
            if (index === val.length - 1) {
              this.$refs.table.toggleRowSelection(item, true);
              this.selections = [item];
              this.$emit("get-selection-data", val);
            } else {
              this.$refs.table.toggleRowSelection(item, false);
            }
          });
        } else {
          this.selections = val;
          this.$emit("get-selection-data", val);
        }
      } else {
        // 多选
        this.selections = val;
        this.selectnumber = val.length === 0 ? "" : "已选" + val.length;
        this.$emit("get-selection-data", val, this.totalCount);
      }
    },
    onSelectAll() {
      // 全选
      if (this.singleChoice) {
        this.$refs.table.clearSelection(); // 把所有选项都清空
      }
    },
    tagColor(tagdata, val) {
      var show = "";
      for (let i = 0; i < tagdata.length; i++) {
        tagdata[i].value
          .toString()
          .split(",")
          .map((item) => {
            if (
              val !== "" &&
              val !== null &&
              val !== undefined &&
              item === val.toString()
            ) {
              show = tagdata[i].color;
            }
          });
      }
      return show;
    },
    insteadColor(tagdata, val) {
      var show = "";
      for (let i = 0; i < tagdata.length; i++) {
        tagdata[i].value
          .toString()
          .split(",")
          .map((item) => {
            if (
              val !== "" &&
              val !== null &&
              val !== undefined &&
              item === val.toString()
            ) {
              show = tagdata[i].color;
            }
          });
      }
      return show;
    },
    tagLabel(tagdata, val) {
      var show = "";
      for (let i = 0; i < tagdata.length; i++) {
        if (tagdata[i].label) {
          tagdata[i].value
            .toString()
            .split(",")
            .map((item) => {
              if (val !== "" && val !== null && item.toString() === val.toString()) {
                show = tagdata[i].label;
              }
            });
        } else {
          tagdata[i].value
            .toString()
            .split(",")
            .map((item) => {
              if (val !== "" && val !== null && item.toString() === val.toString()) {
                show = tagdata[i].value;
              }
            });
        }
      }
      return show;
    },
    getfilename(row, name, style) {
      if (this.caseConversion ? row[name.toLowerCase()] : row[name]) {
        if (style.columnname) {
          return this.caseConversion
            ? row[style.columnname.toLowerCase()]
            : row[style.columnname];
        } else {
          var tmp = this.caseConversion ? row[name.toLowerCase()] : row[name];
          var n = tmp.lastIndexOf("/");
          return tmp.substr(n + 1, tmp.length);
        }
      } else {
        return " ";
      }
    },

    openurl(url) {
      if (
        ["doc", "docx", "xls", "xlsx"].indexOf(
          url.substring(url.lastIndexOf(".") + 1)
        ) !== -1
      ) {
        // fileToPdf2(url).then((res) => {
        //   window.open(res)
        // })
      } else {
        window.open(url);
      }
      window.open(url);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "";
          return;
        }
        if (index === 1) {
          sums[index] = "合计";
          return;
        }
        var col = this.tableConfig.find(
          (p) => column.property === (this.caseConversion ? p.key.toLowerCase() : p.key)
        );
        const values = data.map((item) => Number(item[column.property]));
        if (col && (col.Type === "数值型" || col.Type === "number")) {
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (col.Digit_Number) {
                if (!isNaN(value)) {
                  return this.highPrecisionAdd(prev, curr).toFixed(col.Digit_Number);
                } else {
                  return prev.toFixed(col.Digit_Number);
                }
              } else {
                if (!isNaN(value)) {
                  return this.highPrecisionAdd(prev, curr).toFixed(2);
                } else {
                  return prev.toFixed(2);
                }
              }
            }, 0);
            sums[index] += "";
          } else {
            sums[index] = "";
          }
        }
      });
      return sums;
    },
    rounding(col, value) {
      if (value || value === 0 || value === false) {
        if (col.Digit_Number && (col.Type === "数值型" || col.Type === "number")) {
          return Number(value).toFixed(col.Digit_Number);
        } else {
          return value;
        }
      } else {
        return "-";
      }
    },
    formatData(value, format) {
      if (format.name === "arrayToString") {
        return value.join(",");
      } else if (format.name === "formatBoolean") {
        if (value || value === 0) {
          return "是";
        } else {
          return "否";
        }
      }
    },
    dateformater(value, format) {
      if (
        value === null ||
        value === "" ||
        value === undefined ||
        value === "0001-01-01T00:00:00"
      ) {
        return "-";
      } else if (
        !format ||
        typeof format.showtime === "undefined" ||
        format.showtime === false
      ) {
        return value.toString().split("T")[0];
      } else if (format.showtime === "month") {
        const tmp = value.toString().split("T")[0];
        return tmp.substring(0, tmp.length - 3);
      } else if (format.showtime === "year") {
        const tmp = value.toString().split("T")[0];
        return tmp.substring(0, tmp.length - 6);
      } else if (format.showtime) {
        const tmp = value.toString().replace("T", " ").split(".")[0];
        return tmp.substring(0, tmp.length - 3);
      }
    },
    // 排序
    changeTableSort(data) {
      this.PageInfo = {
        Page: 1,
        PageSize: this.pagesize,
        SortName: data.prop,
        SortOrder: data.order === "ascending" ? "ASC" : "DESC",
        totalCount: this.totalCount,
      };
      this.GetTableData();
    },
    handleSizeChange(val) {
      // 当前页，每页条数,总记录数,排序字段，排序方式
      this.PageInfo.PageSize = val;
      this.pagesize = val;
      this.PageInfo.Page = 1;
      this.currentPage = 1;

      this.GetTableData();
    },
    // 更改页码
    handleCurrentChange(val) {
      this.PageInfo.Page = val;
      this.currentPage = val;
      this.GetTableData();
    },
    GetSelects() {
      // console.log(this.selections);
      return this.selections;
    },
    GetAlldata() {
      var _this = this;
      var index = 0;
      var my = setInterval(() => {
        index++;
        if (_this.tableData.length > 0) {
          clearInterval(my);
          return _this.tableData;
        } else if (index > 5) {
          clearInterval(my);
          return [];
        }
      }, 1000);
    },
    GetPageInfo() {
      return this.PageInfo;
    },
    refresh() {
      this.$refs.table.clearSelection();
      this.$nextTick(() => {
        this.GetTableData();
      });
    },
    search() {
      this.PageInfo.Page = 1;
      this.currentPage = 1;
      this.$nextTick(() => {
        this.GetTableData();
      });
    },
    operatefunction(item, row, btn) {
      this.$emit("getbutton", item, row);
    },
    isShowOperateBtn(btn, row) {
      if (eval(btn.showCondition)) {
        return true;
      } else {
        return false;
      }
    },
    specialformat(str, value) {
      if (value | (value === 0)) {
        str = str.replace("$$$", value);
      } else {
        str = str.replace("$$$", "-");
      }
      return str;
    },
    getrowkey(row) {
      if (row.id) {
        return row.id + this.tablecode;
      } else if (row.Id) {
        return row.Id + this.tablecode;
      }
      return row.id;
    },
    exportexcel(title, exportall = true) {
      this.loading = true;
      this.exceldata = [];
      this.filename = "下载内容";
      if (title) {
        this.filename = title;
      }
      this.json_fields = {};
      this.configlist.map((item) => {
        if (item.Is_Display && item.Code !== "operate") {
          this.$set(
            this.json_fields,
            this.caseConversion ? item.Code.toLowerCase() : item.Code,
            item.Display_Name
          );
        }
      });
      var data = JSON.parse(JSON.stringify(this.tmpparam));
      if (this.selections.length) {
        this.exceldata = this.selections;
        this.xlsx(this.formaterexcel(this.exceldata), this.json_fields, this.filename);
        this.loading = false;
        return;
      }
      if (exportall) {
        data.pageInfo.Page = 1;
        data.pageInfo.PageSize = 99999999;
      }
      if (this.tableStyle.Data_Url) {
        // request({
        //   url: this.tableStyle.Data_Url,
        //   method: 'post',
        //   data
        // }).then((res) => {
        //   if (res.IsSucceed) {
        //     this.exceldata = res.Data.Data
        //     this.formaterexcel(this.exceldata)
        //     this.xlsx(
        //       this.formaterexcel(this.exceldata),
        //       this.json_fields,
        //       this.filename
        //     )
        //     this.loading = false
        //   } else {
        //     this.$message.error(res.Message)
        //     this.loading = false
        //   }
        // })
      }
    },
    formaterexcel(list) {
      var reslist = JSON.parse(JSON.stringify(list));
      reslist.map((item) => {
        this.configlist.map((tmp) => {
          var value =
            item[tmp.Code] || item[tmp.Code] === 0
              ? item[tmp.Code]
              : item[tmp.Code.toLowerCase()];
          if ((value || value === 0) && tmp.Style) {
            var obj = JSON.parse(tmp.Style);
            if (obj.type === "tag" || obj.type === "instead") {
              obj.tagdata.map((i) => {
                if (i.value === value && i.label) {
                  item[tmp.Code] = i.label;
                  item[tmp.Code.toLowerCase()] = i.label;
                }
              });
            }
            if (obj.type === "date") {
              value = this.dateformater(value, obj.style);
            }
            if (obj.type === "switch") {
              item[tmp.Code] = value ? "开" : "关";
              item[tmp.Code.toLowerCase()] = value ? "开" : "关";
            }
            if (obj.type === "special") {
              item[tmp.Code] = this.specialformat(obj.format, value);
              item[tmp.Code.toLowerCase()] = this.specialformat(obj.format, value);
            }
            if (obj.type === "progress") {
              item[tmp.Code] = value + "%";
              item[tmp.Code.toLowerCase()] = value + "%";
            }
            if (obj.type === "progress2") {
              item[tmp.Code] = value + "%";
              item[tmp.Code.toLowerCase()] = value + "%";
            }
            item[tmp.Code] || item[tmp.Code] === 0
              ? (item[tmp.Code] = value)
              : (item[tmp.Code.toLowerCase()] = value);
          }
        });
      });
      return reslist;
    },
    xlsx(json, fields, filename) {
      // 导出xlsx
      json.forEach((item) => {
        for (const i in item) {
          if (fields.hasOwnProperty(i)) {
            item[fields[i]] = item[i];
          }
          delete item[i]; // 删除原先的对象属性
        }
      });
      const sheetName = filename; // excel的文件名称
      const wb = XLSX.utils.book_new(); // 工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
      const ws = XLSX.utils.json_to_sheet(json, {
        header: Object.values(fields),
      }); // 将JS对象数组转换为工作表。
      wb.SheetNames.push(sheetName);
      wb.Sheets[sheetName] = ws;
      const defaultCellStyle = {
        font: { name: "Verdana", sz: 13, color: "FF00FF88" },
        fill: { fgColor: { rgb: "FFFFAA00" } },
      }; // 设置表格的样式
      const wopts = {
        bookType: "xlsx",
        bookSST: false,
        type: "binary",
        cellStyles: true,
        defaultCellStyle: defaultCellStyle,
        showGridLines: false,
      }; // 写入的样式
      const wbout = XLSX.write(wb, wopts);
      const blob = new Blob([this.s2ab(wbout)], {
        type: "application/octet-stream",
      });

      fs.saveAs(blob, filename + ".xlsx");
    },
    s2ab(s) {
      var buf;
      if (typeof ArrayBuffer !== "undefined") {
        buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      } else {
        buf = new Array(s.length);
        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-wrapper{
    height:calc(100% - 60px);
}
.el-pagination {
  margin-top: 24px;
  margin-right: 60px;
  float: right;
  height: 32px;
  //position:absolute;
  //bottom:0;
  //right:10px;
  ::v-deep .el-tooltip.item.el-input__inner {
    height: 28px;
  }
}
.sum {
  float: left;
  margin-left: 0px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #298dff;
  padding: 6px 12px;
  background-color: rgba(41, 141, 255, 0.16);
  border-radius: 4px;
}
// .el-table {
//   border: solid 1px #d9dbe2;
//   border-radius: 5px;
//   height: 100%;
//   ::v-deep .el-table__header-wrapper {
//     height: 36px;
//   }
//   ::v-deep .el-table__fixed-body-wrapper {
//     top: 36px !important;
//   }
//   ::v-deep td {
//     border: none;
//     border-bottom: 1px solid #cecece;
//     color: #222834ca;
//     font-size: 14px;
//   }
//   ::v-deep .el-table__header {
//     th {
//       border-bottom: none;
//       background-color: #ebeef2;
//       padding: 3px 0;
//       border-right: 2px solid #fff;
//     }
//     th:last-of-type {
//       border-right: none;
//     }
//     tr {
//       font-size: 14px;
//       font-family: Microsoft YaHei;
//       font-weight: bold;
//       line-height: 34px;
//       color: rgba(34, 40, 52, 0.85);
//     }
//     .cell {
//       line-height: 34px;
//       white-space: nowrap;
//     }
//   }

//   ::v-deep .el-breadcrumb__separator {
//     margin: 0 4px 0 4px;
//   }

//   ::v-deep .el-table__body {
//     overflow-y: scroll;
//     td {
//       border-bottom: none;
//       padding: 4.5px 0;
//       border-right: 2px solid #fff;
//     }
//     td:last-of-type {
//       border-right: none;
//     }
//     tr {
//       font-size: 14px;
//       font-family: Microsoft YaHei;
//       font-weight: 400;
//       line-height: 26px;
//       color: rgba(34, 40, 52, 0.85);
//     }
//     .el-table__row--striped td {
//       background-color: #f2f7fb;
//     }
//     .hover-row {
//     //   background-color: #e5f1ff;
//     }
//     .hover-row.el-table__row--striped td {
//     //   background-color: #e5f1ff;
//     }
//   }
//   ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//     //display: none;
//     width: 10px; // 横向滚动条
//     height: 10px;
//     background-color: #e5e5e5;
//   }
//   ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
//     background-color: #bbbbbb;
//     border-radius: 5px;
//   }
//   ::v-deep th.gutter {
//     display: table-cell !important;
//   }
//   ::v-deep .el-table__fixed-right {
//     position: absolute;
//     //right:10px !important;
//   }
//   ::v-deep ::before {
//     height: 0px;
//   }
// }
// .colorNo {
//   display: inline-block;
//   width: 72px;
//   height: 24px;
//   border-radius: 14px;
//   text-align: center;
// }
// .el-breadcrumb {
//   line-height: 30px;
// }
// .listtag {
//   margin-right: 1px;
//   background: transparent;
// }
</style>
